<template>
	<view class="car-details">
		<view class="nav-bar" :style="{
			paddingTop: menuButtonInfo.top - 10 + 'px',
			height: menuButtonInfo.top + menuButtonInfo.height + 10 + 'px',
			backgroundColor: carInfo ? `rgba(245, 109, 157, ${navTransparency})` : '#f56d9d'
		}">
			<view class="back xzfx_icon_arrow_left" @click.stop="$back" :style="{
				width: menuButtonInfo.height + 'px',
				height: menuButtonInfo.height + 20 + 'px'
			}"></view>
			<view class="page-title" :style="{
				opacity: navTransparency,
				height: menuButtonInfo.height + 20 + 'px',
				lineHeight: menuButtonInfo.height + 20 + 'px'
			}">
				{{ carInfo.truckBrand || "" }}
				{{ carInfo.truckType || "" }}
			</view>
		</view>
		<xzfx-empty v-if="!carInfo" tips="无车辆信息" />
		<view v-if="carInfo" class="car-images-preview">
			<swiper class="car-images-list" circular :current="imageCurrent" @change="swiperChangeFn">
				<swiper-item class="item" v-for="(item, index) in carInfo.photos" :key="index">
					<image :src="item" />
				</swiper-item>
			</swiper>
			<view class="car-images-number">
				{{ imageCurrent + 1 }}<span>/</span>{{ carInfo.photos.length }}
			</view>
		</view>
		<view v-if="carInfo" class="content-box">
			<view class="car-info-box">
				<view class="car-images-nav">
					<view
						class="item" 
						:class="{selected: imageCurrent === index}" 
						v-for="(item, index) in carInfo.images" 
						:key="index"
						@click.stop="imageCurrent = index">
						<image :src="item" />
					</view>
				</view>
				<view class="car-info-title">
					{{ carInfo.truckBrand }}
					{{ carInfo.truckType }}
				</view>
				<view class="car-info-price">
					<view class="now-price">
						<text>低价:</text>{{ carInfo.basePrice }}<text>万元</text>
					</view>
					<!-- <view class="new-price">
						<text>新车指导价</text>16762
					</view> -->
				</view>
			</view>
			<xzfx-panel title="车辆信息">
				<view slot="content" class="car-info-more">
					<view class="car-info-important">
						<view class="item">
							<view class="value">{{ carInfo.showMiles || 0 }}公里</view>
							<view class="label">表显里程(万公里)</view>
						</view>
						<view class="item">
							<view class="value">{{ carInfo.licenceDate || "-" }}</view>
							<view class="label">上牌时间</view>
						</view>
						<view class="item">
							<view class="value">{{ carInfo.emissionStandard || "-" }}</view>
							<view class="label">排放标准</view>
						</view>
					</view>
					<view class="car-info-commonly">
						<view class="item">
							<view class="label">品牌</view>
							<view class="value">{{ carInfo.truckBrand || "-" }}</view>
						</view>
						<view class="item">
							<view class="label">车型</view>
							<view class="value">{{ carInfo.truckType || "-" }}</view>
						</view>
						<view class="item">
							<view class="label">出厂日期</view>
							<view class="value">{{ carInfo.productDate || "-" }}</view>
						</view>
						<view class="item">
							<view class="label">表显里程</view>
							<view class="value">{{ carInfo.showMiles || "-" }}</view>
						</view>
						<view class="item">
							<view class="label">车身颜色</view>
							<view class="value">{{ carInfo.color || "-" }}</view>
						</view>
						<view class="item">
							<view class="label">轻重体</view>
							<view class="value">{{ carInfo.loadType || "-" }}</view>
						</view>
						<view class="item">
							<view class="label">上牌时间</view>
							<view class="value">{{ carInfo.licenceDate || "-" }}</view>
						</view>
						<view class="item">
							<view class="label">年检到期时间</view>
							<view class="value">{{ carInfo.checkEndDate || "-" }}</view>
						</view>
						<view class="item">
							<view class="label">保险</view>
							<view class="value">{{ carInfo.insureStatus || "-" }}</view>
						</view>
					</view>
					<xzfx-divider>发动机</xzfx-divider>
					<view class="car-info-commonly">
						<view class="item">
							<view class="label">品牌</view>
							<view class="value">{{ carInfo.engineBrand || "-" }}</view>
						</view>
						<view class="item">
							<view class="label">马力</view>
							<view class="value">{{ carInfo.maxPower || "-" }}匹</view>
						</view>
						<view class="item">
							<view class="label">燃油类型</view>
							<view class="value">{{ carInfo.fuelType || "-" }}</view>
						</view>
						<view class="item">
							<view class="label">排放标准</view>
							<view class="value">{{ carInfo.emissionStandard || "-" }}</view>
						</view>
					</view>
					<xzfx-divider>变速箱</xzfx-divider>
					<view class="car-info-commonly">
						<view class="item">
							<view class="label">品牌</view>
							<view class="value">{{ carInfo.gearboxBrand || "-" }}</view>
						</view>
						<view class="item">
							<view class="label">档位</view>
							<view class="value">{{ carInfo.gearboxTrans || "-" }}</view>
						</view>
					</view>
				</view>
			</xzfx-panel>
			<xzfx-panel title="联系信息">
				<view slot="content" class="car-contact-info">
					<view class="item">
						<view class="label">联系电话</view>
						<view class="value">
							{{ carInfo.contackPhone | _maskPhone }}
							<text @click.stop="$call(carInfo.contackPhone || '')"><text class="xzfx_icon_dial"></text>拨号</text>
						</view>
					</view>
					<view class="item">
						<view class="label">联系地址</view>
						<view class="value">
							{{ carInfo.province || "" }}
							{{ carInfo.city || "" }}
							{{ carInfo.district || "" }}
							{{ carInfo.location || "" }}
						</view>
					</view>
				</view>
			</xzfx-panel>
			<xzfx-panel title="实拍图片">
				<view slot="content" class="car-info-images">
					<image :src="item" v-for="(item, index) in carInfo.photos" :key="index" mode="widthFix" />
				</view>
			</xzfx-panel>
		</view>
		
		<view v-if="carInfo" class="action">
			<view class="btn" @click.stop="$checkLogin(goRecord)">我的出价记录</view>
			<view class="btn" @click.stop="show = true">立即报价</view>
		</view>
		
		<xzfx-popup v-if="show" ref="popup" title="立即报价" @close="show = false" @submit="$checkLogin(submitQuoteFn)">
			<view class="xzfx-form">
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">联系人名字</view>
					<view class="xzfx-form-value">
						<input v-model="quote.contackName" type="text" maxlength="10" placeholder="请输入联系人名字" placeholder-class="placeholder">
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">联系人电话</view>
					<view class="xzfx-form-value">
						<input v-model="quote.contackPhone" type="number" maxlength="11" placeholder="请输入联系人电话" placeholder-class="placeholder">
					</view>
				</view>
				<view class="xzfx-form-item">
					<view class="xzfx-form-label required">报价</view>
					<view class="xzfx-form-value" style="display: flex;align-items: center;">
						<input v-model="quote.quotePrice" type="digit" maxlength="11" placeholder="请输入报价" placeholder-class="placeholder" style="width: calc(100% - 80rpx);">
						<view style="text-align: right;width: 80rpx;font-size: 30rpx;">万元</view>
					</view>
				</view>
			</view>
		</xzfx-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				carInfo: null,
				navTransparency: 0,
				menuButtonInfo: uni.getMenuButtonBoundingClientRect(),
				imageCurrent: 0,
				quote: {
					auctionId: "",
					contackName: "",
					contackPhone: "",
					quotePrice: ""
				}
			};
		},
		onLoad(e) {
			this.getDataFn(e)
		},
		onPageScroll(e){
			if(e.scrollTop > 100){
				this.navTransparency = 1
			}else{
				this.navTransparency = (e.scrollTop / 100).toFixed(2)
			}
		},
		methods: {
			goRecord(){
				this.$go('/pages/car-auction/record?auctionId=' + this.carInfo.id)
			},
			swiperChangeFn(e){
				this.imageCurrent = e.detail.current;
			},
			getDataFn(e){
				this.$utils.system.loading("加载中，请稍后");
				this.$apis.carAuction.getDetails(e).then(res => {
					res.photos = res.photos.split(",")
					this.carInfo = res
					this.quote.auctionId = this.carInfo.id
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					uni.hideLoading();
				});
			},
			submitQuoteFn(){
				if(!this.quote.contackName){
					this.$refs.popup.tipFn("error", "请输入联系人名字");
					return
				}
				if(!this.quote.contackPhone){
					this.$refs.popup.tipFn("error", "请输入联系人电话");
					return
				}
				if(!this.$utils.valid.phone(this.quote.contackPhone)){
					this.$refs.popup.tipFn("error", "请输入合法的手机号");
					return
				}
				if(!this.quote.quotePrice){
					this.$refs.popup.tipFn("error", "请输入报价");
					return
				}
				this.$refs.popup.loadingFn("正在保存，请稍后");
				this.$apis.carAuction.quote(this.quote).then(res => {
					this.$refs.popup.loadingCloseFn();
					this.$refs.popup.tipFn("success", "报价成功");
					this.quote = {
						auctionId: this.carInfo.id,
						contackName: "",
						contackPhone: "",
						quotePrice: ""
					}
					setTimeout(() => {
						this.$refs.popup.closeFn();
					}, 1700)
				}).catch(err => {
					this.$refs.popup.loadingCloseFn();
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.car-details{
		position: relative;
		background-color: #fff;
		.nav-bar{
			position: fixed;
			left: 0;
			top: 0;
			z-index: 10;
			width: 100%;
			padding-left: 10rpx;
			display: flex;
			align-items: center;
			.back{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #fff;
				font-weight: 600;
				padding-left: 5rpx;
			}
			.page-title{
				width: 50%;
				color: #fff;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.car-images-preview{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 450rpx;
			.car-images-list{
				height: 450rpx;
				.item{
					height: 450rpx;
					image{
						width: 100%;
						height: 450rpx;
						display: block;
					}
				}
			}
			.car-images-number{
				position: absolute;
				right: 30rpx;
				bottom: 80rpx;
				color: #fff;
				display: flex;
				align-items: center;
				span{
					font-size: 24rpx;
					padding: 0 8rpx;
				}
			}
		}
		.content-box{
			position: absolute;
			left: 0;
			top: 430rpx;
			width: 100%;
			background-color: #f1f1f1;
			margin-top: -50rpx;
			padding-bottom: 120rpx;
			z-index: 1;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			.car-info-box{
				padding: $xzfx-spacing;
				padding-bottom: 30rpx;
				background-color: #fff;
				border-top-left-radius: 30rpx;
				border-top-right-radius: 30rpx;
				.car-images-nav{
					display: grid;
					grid-template-columns: repeat(5,1fr);
					gap: 15rpx;
					.item{
						height: 100rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 5rpx;
						border: 1rpx solid #fff;
						image{
							width: calc(100% - 15rpx);
							height: calc(100% - 15rpx);
							border-radius: 5rpx;
							display: block;
						}
					}
					.selected{
						border-color: $xzfx-theme;
					}
				}
				.car-info-title{
					margin-top: 25rpx;
					line-height: 36rpx;
					font-size: 36rpx;
					font-weight: bold;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.car-info-price{
					display: flex;
					align-items: flex-end;
					margin-top: $xzfx-spacing;
					.now-price{
						color: red;
						height: 46rpx;
						line-height: 46rpx;
						font-size: 46rpx;
						font-weight: bold;
						// display: flex;
						// align-items: flex-end;
						margin-right: 30rpx;
						color: red;
						text:first-child{
							font-size: 28rpx;
							margin-right: 8rpx;
							color: #666666;
							font-weight: 400;
						}
						text:last-child{
							font-size: 28rpx;
							margin-left: 6rpx;
						}
					}
					.new-price{
						color: #999999;
						font-size: 28rpx;
					}
				}
			}
			.car-info-more{
				padding-bottom: 30rpx;
				.car-info-important{
					display: grid;
					grid-template-columns: repeat(3,1fr);
					gap: 15rpx;
					margin: $xzfx-spacing 0;
					.item{
						background-color: #f5f5f5;
						height: 110rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						border-radius: 10rpx;
						border: 1rpx solid #efefef;
						.value{
							font-size: 34rpx;
							color: #333333;
							font-weight: bold;
						}
						.label{
							font-size: 28rpx;
							color: #999999;
						}
					}
				}
				.car-info-commonly{
					display: grid;
					grid-template-columns: repeat(3,1fr);
					gap: 15rpx;
					.item{
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;
						padding: 10rpx 0;
						.value{
							font-size: 30rpx;
							color: #333333;
						}
						.label{
							font-size: 26rpx;
							color: #999999;
							padding-right: 10rpx;
							span{
								padding: 0 0.5em;
							}
						}
					}
				}
			}
			.car-contact-info{
				margin-top: 20rpx;
				padding-bottom: 30rpx;
				.item{
					display: flex;
					justify-content: space-between;
					padding: 10rpx 0;
					.value{
						width: calc(100% - 120rpx);
						font-size: 28rpx;
						color: #333333;
						text:only-child{
							margin-left: 20rpx;
							.xzfx_icon_dial{
								padding-right: 10rpx;
								color: $xzfx-theme;
							}
						}
					}
					.label{
						width: 120rpx;
						font-size: 28rpx;
						color: #999999;
						padding-right: 10rpx;
						span{
							padding: 0 0.5em;
						}
					}
				}
			}
			.car-info-images{
				image{
					border-radius: 10rpx;
					margin-top: $xzfx-spacing;
				}
			}
		}
		
		.action{
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 2;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 $xzfx-spacing;
			border-top: 1rpx solid #f1f1f1;
			.btn{
				width: calc(50% - 15rpx);
				height: 80rpx;
				border-radius: 40rpx;
				color: $xzfx-theme;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1rpx solid $xzfx-theme;
			}
			.btn:last-child{
				width: calc(50% - 15rpx);
				height: 80rpx;
				border-radius: 40rpx;
				color: #fff;
				background-color: $xzfx-theme;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
		
		.xzfx-form{
			padding: 20rpx 30rpx 20rpx 30rpx;
			.xzfx-form-item{
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;
				border-top: 1rpx solid #f1f1f1;
				.xzfx-form-label{
					position: relative;
					width: 220rpx;
					padding-left: 18rpx;
					font-size: 30rpx;
					color: #333333;
				}
				.required::before{
					position: absolute;
					left: 0;
					content: "*";
					color: red;
				}
				.xzfx-form-value{
					width: calc(100% - 220rpx);
					input{
						text-align: right;
					}
				}
			}
			.xzfx-form-item:first-child{
				border-top: none;
			}
		}
		
	}
</style>
